<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <form action="./ajax.php" method="get"> -->
			用户名:<input type="text" class="username" name="username" /><br>
			密码: <input type="text"class="pwd" name="pwd" />
			<input type="submit" class="btn" value="提交" />
		<!-- </form> -->
		<script type="text/javascript">
			// ajax : 异步的JavaScript和xml  Asynchronous Javascript And XML
			// 做数据交互：把数据传给 后端 ，后端传会前端；
			// 无刷（没有刷新）;
			
			var usernameEle = document.querySelector(".username");
			var pwdEle = document.querySelector(".pwd");
			var btn = document.querySelector(".btn");
			
			// ajax 4步；
			//1. 创建ajax对象
			// let xhr = new XMLHttpRequest();  // 兼容主流浏览器
				
			// let xhr = new ActiveXObject();
			btn.onclick = function(){
					var username = usernameEle.value;
					var pwd = pwdEle.value;
					let xhr;
					if(XMLHttpRequest){
						xhr = new XMLHttpRequest();
					}else{
						xhr = new ActiveXObject();
					}
					
					// 2.打开这个ajax对象 true 是异步ajax ，false是同步的ajax（很少）
					xhr.open("get",`./ajax.php?username=${username}&pwd=${pwd}`,true);
					
					// 3.发送ajax
					xhr.send();
					
					// 4.获取ajax返还的结果；
					xhr.onload = function(){
						// console.log("ajax发还成功的时候执行");
						// 获取后端返还的内容
						// console.log( xhr.responseText);
						// console.log(JSON.parse(xhr.responseText));
						let res = JSON.parse(xhr.responseText);
						console.log(res.info);
					}
			}
			
			// 请求头部 request header 前端在发送请求的时候给后端的头部信息；
			// 返还头部 response header ：后端给前端的头部信息；
			
			
			
			
			
		</script>
	</body>
</html>
